<!DOCTYPE html>
<html lang="zh-cn" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>仿制简书</title>
        <link href="images/favicon.ico" rel="icon">
        <link type="text/css" rel="stylesheet" href="css/uikit.css">
        <link type="text/css" rel="stylesheet" href="css/components/tooltip.css">
        <link type="text/css" rel="stylesheet" href="css/components/search.css">
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <script src="js/jquery-2.1.3.min.js" type="text/javascript"></script>
        <script src="js/uikit.min.js" type="text/javascript"></script>
        <script src="js/components/tooltip.min.js" type="text/javascript"></script>        
        <script src="js/components/search.js" type="text/javascript"></script>        
    </head>

    <body>
<div class=" uk-grid" style="min-height:100%;">
    <div class="o-leftbar uk-hidden-small">
        <ul class="o-menu"><!--可通过设置项设置hover背景色-->
            <li class="o-logo"><a href="#">云</a></li><!--可以设置背景色和文字-->
            <li data-uk-tooltip title="导航菜单"><a href="#o-nav" data-uk-offcanvas><i class="uk-icon-th"></i></a></li><!--呼出offcanvas作为主导航菜单-->
            <li data-uk-tooltip="{pos:'right'}" title="搜索"><a href="#o-search" data-uk-offcanvas><i class="uk-icon-search"></i></a></li><!--搜索-->
            
            <!--作为外链或页面专题链接,必须使用图标，最多8个-->
            <li data-uk-tooltip="{pos:'right'}" title="我的github"><a href="#"><i class="uk-icon-github"></i></a></li>
            <li data-uk-tooltip="{pos:'right'}" title="我的分享"><a href="#"><i class="uk-icon-cloud"></i></a></li>
            <li data-uk-tooltip="{pos:'right'}" title="魔方怎么玩"><a href="#"><i class="uk-icon-cube"></i></a></li>
            <!--End 作为外链或页面专题链接-->
        </ul>
        <ul class="o-login"><!--登入登出按钮-->
            <li data-uk-tooltip="{pos:'right'}" title="登入"><a href="#"><i class="uk-icon-sign-in"></i></a></li>
        </ul>
    </div>
    <div class="o-left uk-width-3-10 uk-hidden-small">
        <div class="o-leftwarp">
            <h1>仿制简书</h1>
            <img src="images/avatar.jpg" alt="芒果浩明" class="avatar">
            <h3>浩明的个人博客</h3>
            <p>希望简单简单进步</p>
        </div>
    </div>
    
    
    <div class="o-right uk-width-medium-7-10 ">
        <div class="o-container uk-width-medium-4-5">
            <!--768以下出现导航栏-->
            <nav class="o-medium-bar uk-navbar uk-visible-small">
                <a class="o-toggle uk-navbar-brand" href="#o-nav" data-uk-offcanvas><i class="uk-icon-bars"></i></a>
                <div class="uk-navbar-flip">
                    <div class="uk-navbar-content">
                        <form class="o-hidden-small uk-search" data-uk-search>
                            <input class="uk-search-field" type="search" placeholder="点此搜索">
                        </form>
                    </div>
                </div>
                
                <div class="uk-navbar-content uk-navbar-center uk-navbar-brand">仿制简书</div>
            </nav>
            <hr class="uk-visible-small" />
            <div class="o-main">
                
                <article class="uk-article">
                    <h1 class="uk-article-title"><a href="#">文章标题-洛神赋</a></h1>
                    <p>图片来自网络 “很浅”微信公众号：henqian001 那个，有一天“很浅”派阿三去买水果，然后他买来了一个菠萝，“很浅”高兴地说：“我最爱吃菠萝了！”阿三马上反驳道：“这个是凤梨，不是菠萝。” “很浅”表示，自己已经活了二十几年，怎么可能不知道凤梨就是菠萝呢。于是阿三和“很浅”争论起...</p>
                    <p class="o-meta uk-article-meta">
                        <a href="#">曹植</a><!--作者-->
                        <i class="o-icon uk-icon-calendar-o"></i>
                        <a href="#">2005年04月16日</a><!--日期归档-->
                        <i class="o-icon uk-icon-book"></i>
                        <a href="#">
                        <a href="#">博客日记</a><!--分类-->
                        <i class="o-icon uk-icon-tags"></i>
                        <a href="#">洛神赋</a>,
                        <a href="#">图片</a>,
                        <a href="#">凤梨</a><!--文章标签-->
                        <i class="o-icon uk-icon-comments-o"></i>
                        <a href="#">122</a><!--评论数-->
                    </p>
                    <hr class="uk-article-divider" />
                </article>
                
                <article class="uk-article">
                    <h1 class="uk-article-title"><a href="#">文章标题-洛神赋</a></h1>
                    <p>图片来自网络 “很浅”微信公众号：henqian001 那个，有一天“很浅”派阿三去买水果，然后他买来了一个菠萝，“很浅”高兴地说：“我最爱吃菠萝了！”阿三马上反驳道：“这个是凤梨，不是菠萝。” “很浅”表示，自己已经活了二十几年，怎么可能不知道凤梨就是菠萝呢。于是阿三和“很浅”争论起...</p>
                    <p class="o-meta uk-article-meta">
                        <a href="#">曹植</a><!--作者-->
                        <i class="o-icon uk-icon-calendar-o"></i>
                        <a href="#">2005年04月16日</a><!--日期归档-->
                        <i class="o-icon uk-icon-book"></i>
                        <a href="#">
                        <a href="#">博客日记</a><!--分类-->
                        <i class="o-icon uk-icon-tags"></i>
                        <a href="#">洛神赋</a>,
                        <a href="#">图片</a>,
                        <a href="#">凤梨</a><!--文章标签-->
                        <i class="o-icon uk-icon-comments-o"></i>
                        <a href="#">122</a><!--评论数-->
                    </p>
                    <hr class="uk-article-divider" />
                </article>
                
                <article class="uk-article">
                    <h1 class="uk-article-title"><a href="#">文章标题-洛神赋</a></h1>
                    <p>图片来自网络 “很浅”微信公众号：henqian001 那个，有一天“很浅”派阿三去买水果，然后他买来了一个菠萝，“很浅”高兴地说：“我最爱吃菠萝了！”阿三马上反驳道：“这个是凤梨，不是菠萝。” “很浅”表示，自己已经活了二十几年，怎么可能不知道凤梨就是菠萝呢。于是阿三和“很浅”争论起...</p>
                    <p class="o-meta uk-article-meta">
                        <a href="#">曹植</a><!--作者-->
                        <i class="o-icon uk-icon-calendar-o"></i>
                        <a href="#">2005年04月16日</a><!--日期归档-->
                        <i class="o-icon uk-icon-book"></i>
                        <a href="#">
                        <a href="#">博客日记</a><!--分类-->
                        <i class="o-icon uk-icon-tags"></i>
                        <a href="#">洛神赋</a>,
                        <a href="#">图片</a>,
                        <a href="#">凤梨</a><!--文章标签-->
                        <i class="o-icon uk-icon-comments-o"></i>
                        <a href="#">122</a><!--评论数-->
                    </p>
                    <hr class="uk-article-divider" />
                </article>
                
                <article class="uk-article">
                    <h1 class="uk-article-title"><a href="#">文章标题-洛神赋</a></h1>
                    <p>图片来自网络 “很浅”微信公众号：henqian001 那个，有一天“很浅”派阿三去买水果，然后他买来了一个菠萝，“很浅”高兴地说：“我最爱吃菠萝了！”阿三马上反驳道：“这个是凤梨，不是菠萝。” “很浅”表示，自己已经活了二十几年，怎么可能不知道凤梨就是菠萝呢。于是阿三和“很浅”争论起...</p>
                    <p class="o-meta uk-article-meta">
                        <a href="#">曹植</a><!--作者-->
                        <i class="o-icon uk-icon-calendar-o"></i>
                        <a href="#">2005年04月16日</a><!--日期归档-->
                        <i class="o-icon uk-icon-book"></i>
                        <a href="#">
                        <a href="#">博客日记</a><!--分类-->
                        <i class="o-icon uk-icon-tags"></i>
                        <a href="#">洛神赋</a>,
                        <a href="#">图片</a>,
                        <a href="#">凤梨</a><!--文章标签-->
                        <i class="o-icon uk-icon-comments-o"></i>
                        <a href="#">122</a><!--评论数-->
                    </p>
                    <hr class="uk-article-divider" />
                </article>
                
                <article class="uk-article">
                    <h1 class="uk-article-title"><a href="#">文章标题-洛神赋</a></h1>
                    <p>图片来自网络 “很浅”微信公众号：henqian001 那个，有一天“很浅”派阿三去买水果，然后他买来了一个菠萝，“很浅”高兴地说：“我最爱吃菠萝了！”阿三马上反驳道：“这个是凤梨，不是菠萝。” “很浅”表示，自己已经活了二十几年，怎么可能不知道凤梨就是菠萝呢。于是阿三和“很浅”争论起...</p>
                    <p class="o-meta uk-article-meta">
                        <a href="#">曹植</a><!--作者-->
                        <i class="o-icon uk-icon-calendar-o"></i>
                        <a href="#">2005年04月16日</a><!--日期归档-->
                        <i class="o-icon uk-icon-book"></i>
                        <a href="#">
                        <a href="#">博客日记</a><!--分类-->
                        <i class="o-icon uk-icon-tags"></i>
                        <a href="#">洛神赋</a>,
                        <a href="#">图片</a>,
                        <a href="#">凤梨</a><!--文章标签-->
                        <i class="o-icon uk-icon-comments-o"></i>
                        <a href="#">122</a><!--评论数-->
                    </p>
                    <hr class="uk-article-divider" />
                </article>
        
                <ul class="uk-pagination">
                    <li class="uk-pagination-previous uk-disabled"><span><i class="uk-icon-angle-double-left"></i> 上一页</span></li>
                    <li class="uk-pagination-next"><a href="#">下一页 <i class="uk-icon-angle-double-right"></i></a></li>
                </ul>
                <hr class="uk-article-divider">
            </div>
            <footer class="uk-text-muted uk-text-small">
                <!--子导航菜单-->
                <ul class="o-meta uk-subnav uk-subnav-line ">
                    <li><a href="#">帮助中心</a></li>
                    <li><a href="#">投稿指南</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#">网站统计</a></li>
                </ul>
                <p class="o-meta">&copy;2015 <a href="#">仿制简书</a> /  <a href="#">沪ICP备11018329号-5</a></p>
            </footer>
        </div>
    </div>
</div>  
        
<div id="o-search" class="uk-offcanvas">
                                <div class="uk-offcanvas-bar">
                                    <form class="uk-search">
                                        <input class="uk-search-field" type="search" placeholder="搜索...">
                                    </form>
                                </div>
                            </div>        
<div id="o-nav" class="uk-offcanvas">
    <div class="uk-offcanvas-bar">
        <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
            <li><a href="#">首页</a></li>
            <li><a href="">我的笔记</a></li>
            <li class="uk-parent">
                <a href="#">UI 设计</a>
                <ul class="uk-nav-sub">
                    <li><a href="">交互理论</a></li>
                    <li><a href="">参考案例</a>
                        <ul>
                            <li><a href="">交互原型</a></li>
                            <li><a href="">优秀案例</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li class="uk-parent">
                <a href="#">Web 开发</a>
                <ul class="uk-nav-sub">
                    <li><a href="">HTML&amp;CSS</a></li>
                    <li><a href="">JavaScript</a></li>
                </ul>
            </li>
            <li><a href="#">我的日记</a></li>
        </ul>
    </div>
</div>
    </body>

</html>